import React, { useEffect, useState } from "react";
import {
  Form,
  Input,
  Button,
  Dialog,
  Checkbox,
  Space,
  DatePicker,
  Toast,
} from "antd-mobile";
import { FormInstance } from "antd-mobile/es/components/form";
import dayjs from "dayjs";
import { CloseCircleFill } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import "./index.css";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [tel, setTel] = useState("");

  const onSubmit = () => {
    const values = form.getFieldsValue();
    let zh = values.c;
    let mm = values.d;
    console.log(zh, mm, "账号密码");
    axios.post("/api/sigin", { values }).then((resp) => {
      console.log(resp);
      let { code, msg } = resp.data;
      if (code === 200) {
        Toast.show({
          icon: "success",
          content: msg,
        });
        navigate("/login");
      } else {
        Toast.show({
          icon: "fail",
          content: msg,
        });
      }
    });
  };

  return (
    <div className="login">
      <div className="login-top">
        <img src="https://zhengxin-pub.cdn.bcebos.com/financepic/0dcef1c36477d3f197ff3c46f6e530c9_fullsize.jpg" />
      </div>
      <div className="login-zhong">
        <h3>微脉</h3>
      </div>
      <div className="login-bottom">
        <Form
          form={form}
          initialValues={{
            c: "",
            d: "",
          }}
          footer={
            <Button block color="primary" onClick={onSubmit} size="large">
              注册
            </Button>
          }
        >
          <Form.Item name="c" label="手机号" required>
            <Input placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item name="d" label="密码" required>
            <Input placeholder="请输入密码" />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Index;
